<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title> ztree </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/static/ztree/css/demo.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ztree/css/zTreeStyle/zTreeStyle.css}" type="text/css"/>
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/ztree/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/ztree/js/jquery.ztree.excheck.min.js}"></script>
</head>
<body>
    <div>
        <ul style="margin: 10px 10px 0px 500px" id="treeDemo" class="ztree"></ul>
    </div>

    <div>
        <button style="height: 30px;width: 100px;margin: 10px 10px 0px 500px" id="btn" value="提交">提交</button>
    </div>
</body>
</html>

<script>
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check:{
            enable:true,//设置为接受简单数据格式
            chkStyle: "checkbox",//复选框类型
            chkboxType: { "Y": "ps", "N": "ps" }//当一个节点被选中或未选中时，控制其父节点及其子节点自动选中或取消选中p:父节点  s:子节点
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        { id: 1, pId: 0, name: "随意勾选 1", nocheck: false },
        { id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
        { id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
        { id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
        { id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
        { id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
    ];
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>

<script>
    $(function () {
        $("#btn").click(function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getCheckedNodes(true);
            var NodeString = '';
            $.each(nodes, function (n, value) {
                if(n>0){
                    NodeString += ',';
                }
                NodeString += value.id;
            });
            alert(JSON.stringify(NodeString));
        })
    })

</script>